import React, { useEffect } from 'react';
import { Routes, Route, Link, useNavigate, useLocation } from "react-router-dom";
import './App.less';
import { MDXProvider } from '@mdx-js/react';

import { GithubOutlined, createFromIconfontCN } from '@ant-design/icons';

const IconFont = createFromIconfontCN({
  scriptUrl: [
    '//at.alicdn.com/'
  ],
});
import { Menu, Space } from 'antd';

import logoSrc from '../public/logo.png';

import JsCase from './js/js.case.mdx';
import TsCase from './ts/ts.case.mdx';
import CssCase from './css/css.case.mdx';
import LessCase from './less/less.case.mdx';
import ScssCase from './scss/scss.case.mdx';
import ReactCase from './react/react.case.mdx';
import VueCase from './vue/vue.case.mdx';

// 重定向组件
const Redirect = ({to}) => {
  let navigate = useNavigate();
  useEffect(() => {
    navigate(to);
  });
  return null;
};

const Iframe = ({title, src}) => {
  return (<iframe 
    height="100%" 
    scrolling="no" 
    title={title} 
    style={{width: '100%'}} 
    src={src} 
    frameBorder="no" 
    loading="lazy" 
    allowFullScreen 
  />)
}

// 内容组件
const Content = ({mdx, codepen}) => {
  return (<>
    <div className='mdx'>
      {mdx}
    </div>
    <div className='codepen'>
      {codepen}
    </div>
  </>)
}

const routes = [
  {
    path: '/js',
    key: '/js',
    to: '/js',
    icon: <IconFont type="icon-javascript" />,
    name: 'JS测试用例',
    element: <Content mdx={<JsCase />} codepen={<Iframe title='css' src='https://codepen.io/'/>} />
  },
  {
    path: '/ts',
    to: '/ts',
    key:'/ts',
    icon: <IconFont type="icon-typescript" />,
    name: 'TS测试用例',
    element: <Content mdx={<TsCase />} codepen={<Iframe title='ts' src='https://codepen.io/'/>} />
  },
  {
    path: '/css',
    to: '/css',
    key:'/css',
    icon: <IconFont type="icon-css" />,
    name: 'CSS测试用例',
    element: <Content mdx={<CssCase />} codepen={<Iframe title='css' src='https://codepen.io/'/>} />
  },
  {
    path: '/scss',
    to: '/scss',
    key:'/scss',
    icon: <IconFont type="icon-sass" />,
    name: 'SCSS测试用例',
    element: <Content mdx={<ScssCase />} codepen={<Iframe title='scss' src='https://codepen.io/'/>} />
  },
  {
    path: '/less',
    to: '/less',
    key:'/less',
    icon: <IconFont type="icon-less" />,
    name: 'LESS测试用例',
    element: <Content mdx={<LessCase />} codepen={<Iframe title='less' src='https://codepen.io/'/>} />
  },
  {
    path: '/react',
    to: '/react',
    key:'/react',
    icon: <IconFont type="icon-react" />,
    name: 'REACT测试用例',
    element: <Content mdx={<ReactCase />} codepen={<Iframe title='react' src='https://codepen.io/'/>} />
  },
  {
    path: '/vue',
    to: '/vue',
    key:'/vue',
    icon: <IconFont type="icon-vue" />,
    name: 'VUE测试用例',
    element: <Content mdx={<VueCase />} codepen={<Iframe title='vue' src='https://codepen.io/'/>} />
  }
];



const Layout = () => {
  console.log('', useLocation())
  return (<div className='layout'>
    <header className='header'>
      <div className='logo'>
        <img className='image' src={logoSrc}/>
        <span className='title'>Quality测试平台</span>
      </div>
      <div className='info'>
        <Space>
          <GithubOutlined className='icon' onClick={() => window.open('https://github.com/veeui/vee-testus')}/>
        </Space>
      </div>
    </header>
    <section className='section'>
      <aside className='aside'>
        <Menu
          style={{backgroundColor: '#363636'}}
          defaultSelectedKeys={[useLocation().pathname == '/' ? routes[0].path : useLocation().pathname]}
          mode="inline"
          theme="dark"
        >
            {
              routes.map(m => {
                return (
                  <Menu.Item key={m.key} icon={m.icon}>
                    <Link to={m.to} className='link'>{m.name}</Link>
                  </Menu.Item>
                )
              })
            }
        </Menu>
      </aside>
      <main className='main'>
        <div className='container'>
          <Routes>
            <Route path="/" element={<Redirect to="js" />} />
            {
              routes.map(m => {
                return (
                  <Route key={m.key} path={m.path} element={m.element} />
                )
              })
            }
          </Routes>
        </div>
      </main>
    </section>
  </div>)
}


const App = () => (
  <MDXProvider>
    <Layout />
  </MDXProvider>
)

export default App;
